<template>
  <el-dialog
    v-model="visible"
    title="预览"
    width="800"
    :append-to-body="true"
    @close="close"
    :z-index="2000"
  >
    <div>
      <el-carousel
        height="650px"
        :autoplay="false"
        indicator-position="none"
        arrow="always"
      >
        <el-carousel-item v-for="(item, index) in imageList" :key="item">
          <div style="height: 600px" class="">
            <div
              style="width: 700px; height: 600px; margin: 0 auto"
              class="border-2 flex justify-center items-center"
            >
              <el-image
                style="width: 700px; height: 600px"
                :src="item.image_link_watermark || item.image_link"
                :preview-src-list="[item.image_link_watermark || item.image_link]"
                :preview-teleported="true"
                fit="contain"
                @contextmenu.prevent
              ></el-image>
            </div>
            <div style="width: 550px; margin: 0 auto" class="flex justify-between py-4">
              <div class="text-lg">{{ index + 1 }}/{{ imageList.length }}</div>
              <div v-if="item.image_source_text || item.create_user_text">
                {{ item.image_source_text }} | {{ item.create_user_text }}
              </div>
              <div class="text-gray-400">{{ item.create_time }}</div>
              <!-- <div
                class="flex items-center text-[#41c500] cursor-pointer"
                @click="handleDownload(item)"
              >
                <svg-icon icon-class="download01"></svg-icon> 下载
              </div> -->
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="DialogImage">
import { reactive, ref, toRefs } from "vue";
import { downLoadImage } from "@/utils/downloadFile.js";

const visible = ref(false);

const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});

const imageList = ref([]);

const open = (list) => {
  imageList.value = list;
  visible.value = true;
};

const handleDownload = (row) => {
  downLoadImage(row.image_link, row.image_source_text);
};

const close = () => {
  imageList.value = [];
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
